<!-- 查看就餐地点 -->
<template>
  <view class="content">
    <view class="placeList">
      <view class="title">
        就餐地点
      </view>
      <view v-for="(item,index) in placeList" :key="index" class="placeItem">
        <image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/gartherImage.png"></image>
        <view class="placeName">
          {{ item.shopName }}
        </view>
        <view class="placeLocate">
          <image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/locationPornt.png"
                 @tap="goMap(item)">
          </image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getDiningPlace
} from '@/api/tourplan.js'

export default {
  data() {
    return {
      proposalId: 0,
      placeList: [],
    }
  },
  onLoad: function (options) {
    const that = this
    that.proposalId = options.proposalId
    that.getList()
  },
  methods: {
    //根据当前方案id获取就餐地点
    getList() {
      const that = this
      getDiningPlace({
        proposalId: that.proposalId
      }).then(res => {
        that.placeList = res
      })
    },
    //打开微信内置地图
    goMap(item) {
      const longitude = Number(item.x)
      const latitude = Number(item.y)
      wx.openLocation({
        latitude: latitude,
        longitude: longitude,
        name: String(item.shopName),
        scale: 18,
      })
    },
  }
}
</script>

<style>
page {
  background-color: #F2F2F2;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.placeList {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50rpx 20rpx;
  width: 94%;
  min-height: 600rpx;
  max-height: 900rpx;
  background-color: white;
  border-radius: 30rpx;
}

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100rpx;
  max-height: 100rpx;
  background-color: #4186F5;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  color: white;
  font-size: 35rpx;
  font-weight: 600;
}

.placeItem {
  display: flex;
  align-items: center;
  margin-top: 30rpx;
  height: 120rpx;
  width: 94%;
  background-color: #E9F4FF;
  border-radius: 20rpx;
}

.placeItem image {
  margin: 0rpx 20rpx 0rpx 30rpx;
  width: 88rpx;
  height: 88rpx;
}

.placeName {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.placeLocate {
  margin: 0rpx 20rpx;
}

.placeLocate image {
  width: 45rpx;
  height: 45rpx;
}
</style>
